<template>
  <div class="page">
    <m-header :title="langText&&langText.login" :canback="false">
      <!-- <select class="sel" v-model="langId" @change="getselLang()">
        <option v-for="item in langList" :key="item.id" :value="item.id">{{item.lang}}</option>
      </select> -->
    </m-header>

    <section class="body">
      <div class="img-box">
        <!-- <img class="logo_bg" src="../../assets/images/szxz/denglu_bg.png" alt /> -->
        <img class="logo" :src="lzlogo" alt />
      </div>
      <div class="bot"></div>
      <form class="tj-form">
        <div class="form-item">
          <label for="name">{{langText&&langText.mail}}</label>
          <input type="text" :placeholder="langText&&langText.peten" v-model="formData.account" />
          <!-- oninput="if(value.length>11)value=value.slice(0,11)" -->
        </div>
        <div class="form-item">
          <label for="name">{{langText&&langText.password}}</label>
          <input type="password" :placeholder="langText&&langText.peyp" v-model="formData.password" />
        </div>
        <!-- <div class="form-item">
                    <label for="name">图形验证码</label>
                    <div class="item-flex code">
                        <input type="text" placeholder="请输入图中的验证码" v-model="formData.captcha" maxlength="4">
                        <img class="btn img-code" :src="api+'/api/Captcha/get?identifier='+randomCode" alt="" @click="getRandom()">
                    </div>
        </div>-->
        <p class="other">
          <!-- <span @click="goTo('BackPwd')" >{{langText&&langText.fgpassword}}</span> -->
          <span @click="goTo('Register')" style="color:#666">{{langText&&langText.signupnow}}</span>
          <span @click="goTo('BackPwd')" style="color:#666">忘记密码</span>
        </p>
        <button type="button" class="btn-submit btn-origin" @click="Login">{{langText&&langText.login}}</button>
        <button type="button" class="btn-submit app" @click="$router.push('/download')">{{langText&&langText.downloadapp}}</button>
      </form>
      <!-- <p class="other">
        <span @click="goTo('BackPwd')" class="login-btn">{{langText&&langText.username}}{{customer.retrieve}}</span>
        <span @click="goTo('Register')" style="color:#666">{{langText&&langText.username}}{{customer.register_now}}</span>
      </p> -->
      <!-- <button type="button" class="btn-submit btn-download" @click="goToDownload">下载 App</button> -->
    </section>
    <m-load ref="load"></m-load>
  </div>
</template>
<script>
import { Init, Base } from "@/server/server.js";
import { Util, Load } from "@/assets/commonjs/utils.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      formData: {
        account: "",
        password: ""
      },
      langList: [
        {
          id: 1,
          lang: "简体中文"
        },
        {
          id: 2,
          lang: "English"
        },
      ],
      langType: "zh-cn",
      lang2:'zh-cn',
      langId: null,
      imgCode: null,
      lzlogo:require('@/assets/images/hzlz/lzlogo.png'),
      randomCode: null,
      env: null,
      barcode: null,
      scan: null,
      // lang: {}
      // Login: {},
      customer: {},
      langText:null,
    };
  },
  created() {
    // this.langId = this.getLangId;
    // if (!localStorage.getItem("lang")) {
    //   this.setLanguage();
    // } else {
    //   this.customer = this.lang.customer;
    // }
  },
  mounted() {
    this.initData();
    this.setLanguage2()
    // this.getlang();
  },
  computed: {
    ...mapGetters(["api", "lang", "getLangId"])
  },
  methods: {
    // getLanguage() {
    //   Base.getLanguage().then(res => {
    //     this.lang = res.data.Login;
    //   });
    // },
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = res.data.login;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    getselLang() {
      switch (this.langId) {
        case 1:
          this.lang2 = 'zh-cn';
          this.setLanguage2();
          
          localStorage.setItem("langId_a", this.langId);
          localStorage.setItem("lang2_a", this.lang2);
          break;
        case 2:
          this.langType = "en";
          this.lang2 = 'en';
          this.setLanguage2();
          localStorage.setItem("langId_a", this.langId);
          localStorage.setItem("lang2_a", this.lang2);
          break;
      }
    },
    setLanguage2() {
      Base.setLanguage2({ lang:this.lang2 }).then(res => {
        if (res.code == 1) {
          this.getlang();
          localStorage.setItem('lang_id',this.lang2)
        }
      });
    },
    initData() {
      if(localStorage.getItem("langId_a" )){
        this.langId = localStorage.getItem("langId_a" )
      }
      if(localStorage.getItem("lang2_a" )){
        this.lang2 = localStorage.getItem("lang2_a" )
      }
      this.env = process.env.NODE_ENV;
      mui.init({
        swipeBack: true //启用右滑关闭功能
      });
      if(localStorage.getItem('lang_id')){
        this.langId = localStorage.getItem('lang_id')=='zh-cn'?1:2;
      }else{
        this.langId = 2;
      }
    },
    goTo(name) {
      this.$router.push({ name: name });
    },
    Login() {
      let params = this.formData;
      // console.log(params);
      // return ;
      let msg = Util.isValidate(params);
      if (msg) {
        mui.toast(msg);
        return;
      }
      Load.loadStart(this);
      Init.login(params).then(res => {
        if (res.code == 1) {
          localStorage.setItem("user_id", res.data.user_id);
          localStorage.setItem("username", res.data.username); //邮箱号
          localStorage.setItem("userInfo", JSON.stringify(res.data));
          localStorage.setItem("cookie", res.data.token);
          this.$store.commit("saveUserInfo",res.data);
          //    document.cookie = 'token='+res.data.token;
          // console.log(document.cookie)
          setTimeout(() => {
            Load.loadEnd(this);
            mui.toast(res.msg);
            // this.$router.replace({ name: "Index" });
            this.$router.replace({ name: "Transaction" });
          }, 1000);
        } else {
          setTimeout(() => {
            Load.loadEnd(this);
            mui.toast(res.msg);
            return;
          }, 1000);
        }
      });
    },
    // 图形验证码
    getImgCode(identifier) {
      Base.getImgCode({ identifier }).then(res => {
        this.imgCode = res;
      });
    },
    getRandom() {
      let random1 = parseInt(Math.random(0, 1) * 100000000);
      let random2 = parseInt(Math.random(0, 1) * 100000000);
      let str = "abcdd";
      // return  random1+'abcdd'+random2;
      this.randomCode =
        random1 + "abcdd" + random2 + "-" + new Date().getTime();
      this.formData.identifier = this.randomCode;
    },
    toScan() {
      let _This = this;
      if (!this.barcode) {
        this.barcode = plus.barcode.create("barcode", [plus.barcode.QR], {
          top: "100px",
          left: "0px",
          width: "100%",
          height: "500px",
          position: "static"
        });
        this.barcode.onmarked = _This.onmarked;
        plus.webview.currentWebview().append(this.barcode);
      }
      this.barcode.start();
      this.scan = new plus.barcode.Barcode("bcid");
      this.scan.onmarked = this.onmarked();
      this.scan.start();
      // var FNScanner = api.require('FNScanner');
      //     FNScanner.open({
      //         autorotation: true
      //     }, function(ret, err) {
      //         if (ret) {
      //             console.log('ret')
      //             console.log(ret)
      //             // scan.cancel();
      //             alert(111111111)
      //             // plus.runtime.openURL(ret.content);
      //             // api.openApp({
      //             //         androidPkg : 'android.intent.action.VIEW',
      //             //         mimeType : 'text/html',
      //             //         uri : ret.content
      //             // }, function(ret, err) {
      //             //         var msg = JSON.stringify(ret);
      //             //         api.alert({
      //             //                 title : 'openApp',
      //             //                 msg : msg,
      //             //                 buttons : ['确定']
      //             //         });
      //             // });
      //         } else {
      //             console.log('else')
      //             console.log(err)
      //             // alert(JSON.stringify(err));
      //         }
      //     });
    },
    onmarked(type, result) {
      var text = "未知: ";
      switch (type) {
        case plus.barcode.QR:
          text = "QR: ";
          break;
        case plus.barcode.EAN13:
          text = "EAN13: ";
          break;
        case plus.barcode.EAN8:
          text = "EAN8: ";
          break;
      }
      if (result) {
        // alert( text+result );
        this.barcode.close();
        try {
          if (plus) {
            mui.confirm("确定跳转", actions => {
              if (actions.index == 0) plus.runtime.openURL(result);
            });
          }
        } catch (e) {
          mui.confirm("确定跳转", actions => {
            if (actions.index == 1) plus.runtime.openURL(result);
          });
        }
      }
    },
    goToDownload() {
      this.$router.push({ name: "Download" });
    }
  }
};
</script>

<style scoped lang="less">
@import "~link-less";
.sel {
  color: #fff;
}
.body {
  background: #fff;
  .img-box {
    position: relative;
    background-color: #4EB6AD;
    height: 388px;
    width: 100%;
    >img{
      height: 388px;
      // width: 100%;
    }
    // border-radius: 0px 0px 100% 100%;
    .body-title {
      position: absolute;
      top: 10px;
      left: 0;
      right: 0;
      margin: auto;
      text-align: center;
      color: #fff;
      font-size: 34px;
    }
    .logo_bg {
      width: 100%;
      opacity: 0;
    }
    .logo {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .bot{
    background-color: #4EB6AD;
    height: 120px;
    width: 100%;
    border-radius: 120%;
    margin-top: -60px;
  }
  .tj-form {
    margin: 80px 50px 0px 50px;
    font-size: 34px;
    .form-item {
      label{
        font-weight:545;
        color: #333333;
      }
      .display-flex();
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      & > label {
        flex: 0.3;
        color: #333;
      }
      & > input {
        flex: 1;
        margin: 0;
        background: none;
        color: #000;
        border: none;
      }
    }
    .btn-origin {
      // margin-top: 71px;
      // background: #406ec3;
    }
    .app{
      background-color: #8498E3;
      margin-top: 30px;
    }
    .btn-white {
      background-color: whitesmoke;
      color: #333;
      font-size: 40px;
      letter-spacing: 5px;
      font-family: fantasy; //monospace fantasy
    }
  }
  .other {
    margin: 30px 20px;
    .display-flex();
    justify-content: space-between;
    // text-align: right;
    // margin: 0 @margin-primary  @margin-primary ;
    // color: #406ec3;
    color: #4EB6AD;
    font-size: 28px;
  }
  .btn-download {
    display: block;
    width: 92%;
    height: 44px;
    background: #78bc43;
    margin: 0 auto 4vw;
  }
}
/deep/ .header{
  position: relative;
  
}
.sel{
  color: #333;
  position: absolute;
  top: 0;
  right: 0;
}
</style >

